<template>
	<view>
		<block v-if="isHasDataFlag">
			<view class="zxrList">
				<view class="listItem spaceBet"
					v-for="(item,index) in zxrList"
					:key="index"
					@tap="goZxrInfo(item.id)"
				>
					<view class="left">
						<image class="defImg" :src="defHead"></image>
						<view class="usename">{{item.zxrName}}</view>
						<view>{{item.zxrMobile}}</view>
					</view>
					<view class="right" @tap.stop="delZxr(item.id)">
						<view class="iconfont icon-shanchu"></view>
					</view>
				</view>
			</view>
		</block>
		<block v-else-if="isHasDataFlag == false">
			<no-data noDataTxt="暂无咨询人"></no-data>
		</block>
		<view class="addZxrInfo" @tap="addZxr">
			<text class="iconfont icon-jia"></text>
			<text>添加咨询人<text class="smTxt">(最多添加10个)</text></text>
		</view>
		<common-alert :showAlertFlag="showAlertFlag" :alertWidth="alertWidth">
			<view class="alertContent">确认要删除该咨询人吗</view>
			<view class="tui-alert-btn" :hover-stay-time="150">
				<view class="cancelBtn" @tap.stop="cancelDel">取消</view>
				<button class="sureBtn" @tap="sureFun" :disabled="isDisableFlag">确认</button>
			</view>
		</common-alert>
	</view>
</template>

<script>
	import { getZxUserList,delZxr } from '@/api/xlzx/index'
	export default {
		data(){
			return{
				showAlertFlag:false,
				alertWidth:600,
				zxrList:[],
				isRefreshFlag:false,
				zxrId:'',
				isHasDataFlag:null,
				defHead:this.defHead,
				isDisableFlag:false
			}
		},
		onLoad(){
			this.getZxUserList();
		},
		onShow(){
			if(this.isRefreshFlag){
				this.getZxUserList();
			}
		},
		onHide(){
			this.isRefreshFlag = false;
		},
		methods:{
			getZxUserList(){
				getZxUserList().then(res=>{
					this.isHasDataFlag = true;
					this.zxrList = res.data.datas;
				}).catch(err=>{
					if(err.data.code == 50001){
						this.zxrList = [];
						this.isHasDataFlag = false;
					}
				});
			},
			addZxr(){
				if(this.zxrList.length >=10){
					this.util.showToast('最多可添加10个咨询人');
					return;
				}
				uni.navigateTo({
					url:'./addZxrInfo'
				})
			},
			delZxr(id){
				this.zxrId = id;
				this.showAlertFlag = true;
			},
			goZxrInfo(id){
				uni.navigateTo({
					url:'./zxrInfo?id=' + id
				})
			},
			sureFun(){
				var field = { id:this.zxrId };
				uni.showLoading({ title: '删除中...', mask: true }); 
				this.isDisableFlag = true;
				delZxr(field).then(res=>{
					this.isDisableFlag = false;
					this.util.showToastSuc('删除成功');
					setTimeout(()=>{
						this.showAlertFlag = false;
						this.getZxUserList();
					},1500)
				}).catch(err=>{
					this.isDisableFlag = false;
					console.log(err)
				});
			},
			cancelDel(){
				this.showAlertFlag = false;
			}
		}
	}
</script>

<style lang='scss'>
	@import url("/static/css/common/alert.css");
	page{
		background: $pss-bg-primary;
	}
	.addZxrInfo{
		width: 690rpx;
		height: 90rpx;
		background: $pss-color-blueDeep;
		color: #fff;
		font-size: $font-size30;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 30rpx;
		bottom: 50rpx;
		border-radius: 50rpx;
		.icon-jia{
			font-size: 38rpx;
			margin-right: 10rpx;
		}
		.smTxt{
			font-size: $font-size24;
		}
	}
	.zxrList{
		padding: 20rpx 30rpx 0;
		.listItem{
			border-radius: 10rpx;
			background: #fff;
			padding: 20rpx;
			align-items: center;
			margin-bottom: 20rpx;
			.left{
				display: flex;
				align-items: center;
				font-size: $font-size30;
				color: $pss-text-color3;
				.defImg{
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.usename{
					margin-right: 15rpx;
				}
			}
			.right{
				height: 80rpx;
				padding-left: 80rpx;
				line-height: 80rpx;
				.icon-shanchu{
					font-size:36rpx;
					color: $pss-color-red;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
</style>